import { Button, Modal, Select } from 'antd'
import { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { SortableElement } from 'react-sortable-hoc'
import { cloneDeep } from 'lodash'
import {
  getChangePageChildAction,
  getDeletePageChildAction
} from '../../store/action'
import Banner from './component/Banner'
import List from './component/List'
import Footer from './component/Footer'

import style from './index.module.scss'

const { Option } = Select

const AreaItem = (props) => {
  const { value: index } = props

  const dispatch = useDispatch()
  const pageChild = useSelector(
    (state) => state.homeManagement.schema.children[index] || {}
  )

  const [isModalVisible, setIsModalVisible] = useState(false)
  const [temp, setTemp] = useState(pageChild)

  useEffect(() => {
    setTemp(pageChild)
  }, [pageChild])

  const showModal = () => {
    setIsModalVisible(true)
  }

  const handleModalOk = () => {
    setIsModalVisible(false)
    dispatch(getChangePageChildAction(index, temp))
  }

  const handleModalCancel = () => {
    setIsModalVisible(false)
    setTemp(pageChild)
  }

  const handleSelectChange = (value) => {
    setTemp({ name: value, attributes: {}, children: [] })
  }

  const changeTempPageChildAttributes = (kvObj) => {
    const newTempPageChild = cloneDeep(temp)
    for (const key in kvObj) {
      newTempPageChild.attributes[key] = kvObj[key]
    }
    setTemp(newTempPageChild)
  }

  const changeTempPageChildChildren = (children) => {
    const newTempPageChild = cloneDeep(temp)
    newTempPageChild.children = children
    setTemp(newTempPageChild)
  }

  const removePageChild = () => {
    dispatch(getDeletePageChildAction(index))
  }

  const map = {
    banner: Banner,
    list: List,
    footer: Footer
  }

  const getComponent = () => {
    const { name } = temp
    const Component = name ? map[name] : null
    return Component ? (
      <Component
        {...temp}
        changeAttributes={changeTempPageChildAttributes}
        changeChildren={changeTempPageChildChildren}
      />
    ) : null
  }

  return (
    <li className={style.item}>
      <span className={style.content} onClick={showModal}>
        {pageChild.name ? pageChild.name + '组件' : '当前区块为空'}
      </span>

      <span className={style.delete}>
        <Button type="dashed" size="small" danger onClick={removePageChild}>
          删除
        </Button>
        <Modal
          title="选择组件"
          visible={isModalVisible}
          onOk={handleModalOk}
          onCancel={handleModalCancel}
        >
          <Select
            value={pageChild.name}
            style={{ width: '100%' }}
            onChange={handleSelectChange}
          >
            <Option value="banner">Banner 组件</Option>
            <Option value="list">List 组件</Option>
            <Option value="footer">Footer 组件</Option>
          </Select>
          {getComponent()}
        </Modal>
      </span>
    </li>
  )
}

export default SortableElement(AreaItem)
